<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>在线尝试 Bootstrap 实例</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

    <div id="content">
        
        <table class="table">
            <caption>基本的表格布局</caption>
            <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            </tbody>
        </table>

        <table class="table table-bordered table-striped">
            <caption>带边框&条纹的表格布局</caption>
            <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            </tbody>
        </table>

        <table class="table table-hover">
            <caption>悬停的表格布局</caption>
            <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            </tbody>
        </table>

        <table class="table table-condensed">
            <caption>精简的表格布局</caption>
            <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            </tbody>
        </table>

        <table class="table">
            <caption>改变颜色的表格布局</caption>
            <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">
                <td>success</td>
                <td>success</td>
            </tr>
            <tr class="active">
                <td>active</td>
                <td>active</td>
            </tr>
            <tr class="warning">
                <td>warning</td>
                <td>warning</td>
            </tr>
            <tr class="danger">
                <td>danger</td>
                <td>danger</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>